<template>
	<view>
		<view style="margin-top:20rpx;">
			<view class="list_con u-border-bottom u-margin-top-20">
				<text class="dis_inl_blo circle"></text>
				<text style="color:#0c838b;">报修信息</text>
			</view>
			
			<view class="list_con list_con1 u-border-bottom u-rela" @click="showbigtype=true">
				<text class="u-abso pos_left">维修区域</text>
				<u-select class="u-abso pos_right" v-model="showbigtype" mode="single-column" :list="bigtypes" @confirm="confirmbigtype"></u-select>
				<text style="right:60rpx;" class="u-abso pos_right">{{bigtypelabel}}</text>
				<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
			</view>
			<view class="list_con list_con1 u-border-bottom u-rela" @click="showtype=true">
				<text class="u-abso pos_left">维修类型</text>
				<u-select class="u-abso pos_right" v-model="showtype" value-name="id" label-name="name" mode="single-column" :list="types" @confirm="confirmtype"></u-select>
				<text style="right:60rpx;" class="u-abso pos_right">{{typelabel}}</text>
				<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
			</view>
			<view class="list_con list_con1 u-border-bottom u-rela" v-if="bigtype==0">
				<text class="u-abso pos_left">业主房号</text>
				<input class="u-abso pos_right" v-model="house" type="text" placeholder="请输入业主房号">
			</view>
		</view>
		
		<view class="list_con" style="margin-top:20rpx;">
			<text>现场图片</text>
			
			<u-upload :action="action" :file-list="fileList" @on-success="successimg" @on-remove="deletePic"  maxCount="9"></u-upload>
			
		</view>
		<view class="list_con">
			<text>简述情况</text>
			<textarea v-model="memo" value="" placeholder="请简单描述详细情况" />
		</view>
		<button class="btn_con" @click="repair">提交</button>
		<view style="height:100rpx;"></view>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	import {
		repair,
		getRepairType
	} from "@/service/patrolService.js";
	export default {
		data () {
			return {
				house:'',
				showtype:false,
				typelabel:'请选择',
				types:[],
				type:0,
				
				showbigtype:false,
				bigtypelabel:'请选择',
				bigtypes:[{
						value: '1',
						label: '公区'
					},
					{
						value: '0',
						label: '户内'
					}],
				bigtype:0,
				
				showUploadList:false,
				
				memo:'',
				images:[],
				fileList:[],
				action:'https://admin.gslhzhwy.com/api/upload/file',
			}
		},
		onLoad(options) {
			getRepairType({type:this.bigtype}).then(this.getRepairType);
		},
		onShow() {
			
		},
		methods:{
			getRepairType(e){
				if(e.code==200){
					this.types=e.result;
				}
			},
			confirmtype(e){
				this.type=e[0].value;
				this.typelabel=e[0].label
			},
			confirmbigtype(e){
				this.bigtype=e[0].value;
				this.bigtypelabel=e[0].label;
				getRepairType({type:this.bigtype}).then(this.getRepairType);
			},
			successimg:function(e){
				if (e.code == 1) {
					this.images.push(e.data.url);
				}
			},
			// 删除图片
			deletePic(event) {
				this.images.splice(event.index,1);
			},
			repair(){
				repair({
					type:this.type,
					house:this.house,
					content:this.memo,
					images:this.images,
				}).then(res=>{
					// console.log(res)
					if(res.code==200){
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success', 
							icon: false
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error', 
							icon: false
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.list_con{
		padding:20rpx;
		background-color: #fff;
		input{
			width:70%;
			text-align: right;
		}
	}
	.list_con1{
		height:80rpx;
	}
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:20rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #0c838b;
	}
	.list_con textarea{
		width:93%;
		height:150rpx;
		padding:20rpx;
		margin-top:10rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		border:1rpx solid #ddd;
	}
	.list_con2{
		padding:20rpx;border-top:20rpx solid #f2f2f2;
		background-color: #fff;
	}
	
	.text_con{
		textarea{
			width:94%;
			padding:20rpx;
			border-radius: 15rpx;
			background-color: #f8f8f8;
		}
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff;
		margin:70rpx auto 20rpx;
	}
	

	.pre-box {
		margin-top:20rpx;
	}

	.pre-item {
		// flex: 1;
		display: inline-block;
		border-radius: 10rpx;
		width:200rpx;
		height: 200rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		margin-left:10rpx;
	}

	.pre-item-image {
		width: 100%;
		height: 100%;
	}
	
</style>